<template>
  <!-- 横条按钮组件 -->
  <div class="hu-cell-button">
    <div class="hu-cell-button-left">
      <slot name="left">{{text}}</slot>
    </div>
    <div class="hu-cell-button-right">
      <slot name="right">
        <van-button v-if="buttonText" type="info" @click="onRight">{{buttonText}}</van-button>
      </slot>
    </div>
    <div class="hu-cell-button-label">
      <slot name="label" v-if="label">
        <div class="hu-cell-button-label-text" v-if="label" @click="onLabel">{{label}}</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "HuCellButton",
  props: {
    // 左侧文字
    text: {
      type: String,
      default: "",
    },
    // 右按按钮文字
    buttonText: {
      type: String,
      default: "",
    },
    // 中间文字
    label: {
      type: String,
      default: "",
    },
  },

  methods: {
    // 点击右侧按钮
    onRight() {
      this.$emit("click-right");
    },

    //点击中间
    onLabel() {
      this.$emit("click-label");
    },
  },
};
</script>

<style lang="less">
@import "@/less/mixin";

.hu-cell-button {
  border-top: 1px solid @gray-3;
  background-color: @white;
  height: 44px;
  .hu-cell-button-left {
    height: 100%;
    padding-left: 16px;
    font-size: 14px;
    color: #939393;
    line-height: 20px;
    float: left;
    display: flex;
    align-items: center;
  }
  .hu-cell-button-label {
    float: right;
    height: 100%;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .hu-cell-button-label-text {
      float: left;
      color: @blue;
    }
  }
  .hu-cell-button-right {
    float: right;
    cursor: pointer;
    height: 100%;
    display: flex;
    .van-button {
      width: 120px;
      height: 100%;
      border-radius: 0;
      flex: 1;
    }
    .hu-button--text {
      height: 100%;
      line-height: 44px;
      flex: 1;
      color: @blue;
      text-align: center;
      padding: 0 16px;
    }
  }
}
</style>